<script setup>
import { ref } from 'vue'
import BaseStationManagement from './components/BaseStationManagement.vue'
import DeviceManagement from './components/DeviceManagement.vue'
import DebugTerminal from './components/DebugTerminal.vue'

const activeRoute = ref('base-station')

const menuItems = [
  {
    index: 'base-station',
    title: '基站管理',
    icon: 'home'
  },
  {
    index: 'device',
    title: '设备管理',
    icon: 'server'
  },
  {
    index: 'debug',
    title: 'DEBUG',
    icon: 'terminal'
  }
]

function handleMenuClick(index) {
  activeRoute.value = index
}
</script>

<template>
  <div class="app-container">
    <el-container style="height: 100vh; background: #f5f5f5;">
      <!-- 左侧导航栏 -->
      <el-aside width="200px" style="background-color: #304156; color: #fff;">
        <div class="logo-container">
          <h2 style="text-align: center; padding: 20px 0; color: #fff;">基站管理系统</h2>
        </div>
        <el-menu 
          :default-active="activeRoute"
          class="el-menu-vertical-dark"
          @select="handleMenuClick"
          background-color="#304156"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item 
            v-for="item in menuItems" 
            :key="item.index" 
            :index="item.index"
          >
            <template #icon>
              <el-icon><component :is="item.icon" /></el-icon>
            </template>
            {{ item.title }}
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧内容区域 -->
      <el-main style="padding: 20px;">
        <el-card shadow="hover" style="height: 100%;">
          <template #header>
            <div class="card-header">
              <span>{{ menuItems.find(item => item.index === activeRoute)?.title }}</span>
            </div>
          </template>
          <div class="card-content">
            <BaseStationManagement v-if="activeRoute === 'base-station'" />
            <DeviceManagement v-else-if="activeRoute === 'device'" />
            <DebugTerminal v-else-if="activeRoute === 'debug'" />
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.app-container {
  width: 100%;
  height: 100vh;
}

.logo-container {
  border-bottom: 1px solid #48576a;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  height: calc(100% - 40px);
  overflow: auto;
}

/* 样式覆盖 */
:deep(.el-main) {
  padding: 20px;
}

:deep(.el-card) {
  height: 100%;
}

:deep(.el-card__body) {
  height: calc(100% - 52px);
  padding: 20px;
  overflow: auto;
}
</style>
